<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="/js/echarts.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <script src="https://cdn.bootcss.com/jspdf/1.5.3/jspdf.debug.js"></script>
    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
    <style>
        #character {
            font-size: 22px;
            font-family: 楷体;
        }

        #introduction {
            font-size: 22px;
            font-family: 楷体;
        }

        #advantage {
            font-size: 22px;
            font-family: 楷体;
        }

        #download {
            float: right;
        }
        #back {
            float: right;
        }

        .test {
            color: #ff001e;
            font-size: 22px;
            font-family: 楷体;
        }
    </style>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<input th:value="${tester.id}" hidden id="testerId">
<div>
    <button id="download" class="layui-btn layui-btn-primary layui-btn-warm">下载</button>
    <button id="back" class="layui-btn layui-btn-primary layui-btn-normal">返回</button>
</div>


</div>
<div id="down1" class="layui-container">
    <div id="main" style="width: 500px;height:400px;">
    </div>
    <div style="width:1100px;text-align: left">
        <div>
            <span class="test"> 测试人：<span th:text="${tester.name}"></span></span>
            <span class="test"> 测试时间：<span th:text="${#dates.format(tester.createTime, 'yyyy-MM-dd HH:mm:ss')}"></span> </span>
        </div>
        <div id="character1">您的性格是</div>
        <div id="introduction1"></div>
        <br>
        <div id="advantage1"></div>
        <div id="character2">您的性格是</div>
        <div id="introduction2"></div>
        <br>
        <div id="advantage2"></div>
        <div id="character3">您的性格是</div>
        <div id="introduction3"></div>
        <br>
        <div id="advantage3"></div>
        <div id="character4">您的性格是</div>
        <div id="introduction4"></div>
        <br>
        <div id="advantage4"></div>
    </div>
</div>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据

    layui.use(['jquery'], function () {
        var $ = layui.jquery;
        $.ajax({
            url: "/tester/selectResultAnalyse",
            type: "get",
            data: {testerId: $("#testerId").val()},
            contentType: "application/json;charset=utf-8",
            async: false,
            success: function (obj) {
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(obj);
                //创建一个数组用来保存测试得分的值
                let numCount = [];
                var data = obj.series[0].data;
                for (let i = 0; i < data.length; i++) {
                    numCount[i] = data[i].value;
                }
                //降序
                numCount.sort((a,b)=>{return b-a});
                //创建一个数组用来保存值对应的颜色
                let color = [];
                let j = 0;
                console.log(numCount)
                for (let i = 0; i < numCount.length; i++) {
                    for (let k = 0; k < data.length; k++) {
                        if(data[k].value == numCount[i]){
                            color[i]=data[k].name;
                        }
                    }
                }

                console.log(color)

                for (let i = 0; i < color.length; i++) {
                    if (color[i] === '红色性格') {
                        $("#character"+(i+1)).html("您的性格是红色性格");
                        $("#introduction"+(i+1)).html("【性格特点】：\n" +
                            "积极乐观 情绪波动大起大落\n" +
                            "真诚主动 开玩笑不分场合\n" +
                            "善于表达 疏于兑现承诺\n" +
                            "富有感染力 这山望着那山高\n");
                        $("#advantage"+(i+1)).html("【性格优势】：\n" +
                            "作为个体：高度乐观的积极心态。喜欢自己，也容易接纳别人。把生命当作值得享受的经验。喜欢新鲜、变化和刺激。经常开心，追求快乐。情感丰富而外露。\n" +"<br>"+
                            "沟通特点：才思敏捷，善于表达。喜欢通过肢体上的接触传达亲密情感。容易与人攀谈。人越多越亢奋。乐于表达自己的看法。\n" +"<br>"+
                            "作为朋友：真诚主动，热情洋溢。喜欢交友，善于与陌生人互动。擅长搞笑，是带来乐趣的伙伴。有错就认，很快道歉。喜欢接受别人的肯定和不吝赞美。\n" +"<br>"+
                            "对待工作和事业：工作主动，寻找新任务。富有感染力，能够吸引他人参与。不喜欢太多的规定束缚，富有创意。工作以活泼化、丰富化的方式进行。反应快，闪电般开始。\n" +"<br>"+
                            "【性格过当】：\n" +
                            "作为个体：情绪波动大起大落。变化无常，随意性强。鲁莽冲动，轻信他人，容易上当受骗。虚荣心强，不肯吃苦，贪图享受。不肯承担责任，期待有别人为自己的人生负责。拒绝长大。借放纵来麻痹自己的痛苦和烦恼，而不去认真思考生命的本质。\n" +"<br>"+
                            "沟通特点：说话少经大脑思考，脱口而出。对于严肃和敏感的事情也会开玩笑。炫耀自己，夺人话题。注意力分散，不能专注倾听，插话。口无遮拦，不保守秘密。不可靠，光说不练。夸大吹嘘自己的成功。\n" +"<br>"+
                            "作为朋友：缺少分寸，过度的玩笑和热情。只想当主角。谈论自己感兴趣的话题，对和自己无关的话题心不在焉。好心办坏事。\n" +"<br>"+
                            "对待工作事业：跳槽频率高，这山望着那山高。没有规划，随意性强。没有焦点，把精力分散在太多的不同方向。不切实际地希望所有的工作都要有趣味。很难全神贯注，经常性地走神。异想天开，难以预料。\n")

                    }
                    if (color[i] === '黄色性格') {
                        $("#character"+(i+1)).html("您的性格是黄色性格");
                        $("#introduction"+(i+1)).html("【性格特点】：\n" +
                            "行动迅速 死不认错\n" +
                            "善于忠告 控制欲强\n" +
                            "不感情用事 咄咄逼人\n" +
                            "坚持不懈 容易发怒\n");
                        $("#advantage"+(i+1)).html("【性格优势】：\n" +
                            "作为个体：不达目标，誓不罢休。不停地给自己设定目标以推动前进。强烈的进取心，居安思危。独立性强。有强烈的求胜欲。危难时刻挺身而出。讲究速度和效率。敢于接受挑战并渴望成功。\n" +"<br>"+
                            "沟通特点：以务实的方式主导会谈。喜欢主导整个事情进行的方式。能够直接抓住问题的本质。说话用字简明扼要，不喜欢拐弯抹角。不受情绪干扰和控制。\n" +"<br>"+
                            "作为朋友：给予解决问题的方法，而非纠缠在过去。迅速提出忠告和方向。直言不讳地提出建议。\n" +"<br>"+
                            "对待工作和事业：动作干净利落，讲求效率。能够承担长期高强度的压力。强烈的目标趋向，善于设定目标。高瞻远瞩，有全局观念。善于委派工作。坚持不懈，促成活动。\n" +"<br>"+
                            "【性格过当】：\n" +
                            "作为个体：自己永远是对的，死不认错。趾高气扬，霸道。只关注自己的感受，不体贴别人的心情和想法。以自我为中心，自私倾向。霸道。脾气暴躁，容易发怒。缺少同情心。傲慢自大，目中无人。\n" +"<br>"+
                            "沟通特点：喜欢争辩和冲突。铁石心肠，对情绪表现冷淡。粗线条，简单粗暴。毫无敏感，无力洞察他人内心和理解他人所想。缺乏耐心，是非常糟糕的倾听者。不太能体谅他人，对行事模式不同的人缺少包容度。\n" +"<br>"+
                            "作为朋友：大多时候仅保持理性的友谊。讨厌与犹豫不决、能力弱的人互动。试图控制和影响大家的活动，希望他人服从自己而非配合别人。除了工作内容，很少交谈其它话题。情感上习惯与人保持一定的距离。很少对人流露出直接诚挚的关怀。需要你的时候才找你。为别人做主。\n" +"<br>"+
                            "对待工作和事业：生活在无尽的工作当中而不是人群中。数量远比质量重要。目标没有完成时，容易发怒且迁怒于人。寻求更多的权力，有极强的控制欲。拒绝为自己和他人放松。完成工作第一，人的事情第二。\n")
                    }
                    if (color[i] === '绿色性格') {
                        $("#character"+(i+1)).html("您的性格是绿色性格");
                        $("#introduction"+(i+1)).html("【性格特点】：\n" +
                            "温柔祥和 拒绝改变\n" +
                            "为他人考虑 胆小被动\n" +
                            "心平气和 没有主见\n" +
                            "善于协调 缺乏创意\n");
                        $("#advantage"+(i+1)).html("【性格优势】：\n" +
                            "作为个体：爱静不爱动，有温柔祥和的吸引力和宁静愉悦的气质。和善的天性，做人厚道。追求人际关系的和谐。奉行中庸之道，为人稳定低调。遇事以不变应万变，镇定自若。知足常乐，心态轻松。追求平淡的幸福生活。有松弛感，能融入所有的环境和场合。\n" +"<br>"+
                            "作为朋友：从无攻击性。富有同情和关心。宽恕他人对自己的伤害。能接纳所有不同性格的人。对友情的要求不严苛。处处为别人考虑，不吝付出。与之相处轻松自然又没有压力。最佳的垃圾宣泄处，鼓励他们的朋友多谈自己。从不尝试去改变他人。\n" +"<br>"+
                            "对待工作和事业：高超的协调人际关系的能力。善于从容地面对压力。巧妙地化解冲突。能超脱游离政治斗争之外，没有敌人。缓步前进以取得思考空间。注重人本管理。推崇一种员工都积极参与的工作环境。尊重员工的独立性，从而博得人心和凝聚力。\n" +"<br>"+
                            "【性格过当】：\n" +
                            "作为个体：按照惯性来做事，拒绝改变，对于外界变化置若罔闻。懒洋洋的作风，原谅自己的不思进取。懦弱胆小，纵容别人欺压自己。\n" +"<br>"+
                            "沟通特点：一拳打在棉花上，毫无反应。没有主见，把压力和负担通通转嫁到他人身上。不会拒绝他人，给自己和他人都带来无穷麻烦。\n" +"<br>"+
                            "作为朋友：不负责任的和稀泥。姑息养奸的态度。压抑自己的感受以迁就别人。期待让人人满意，对自己的内心不忠诚。\n" +"<br>"+
                            "对待工作和事业：安于现状，不思进取。乐于平庸，缺乏创意。害怕冒风险，缺乏自信。拖拖拉拉。缺少目标。\n");
                    }

                    if (color[i] === '蓝色性格') {
                        $("#character"+(i+1)).html("您的性格是蓝色性格");
                        $("#introduction"+(i+1)).html("【性格特点】：\n" +
                            "思想深邃 情感脆弱\n" +
                            "默默关怀他人 喜好批判和挑剔\n" +
                            "敏感而细腻 不主动与人沟通\n" +
                            "计划性强 患得患失\n");
                        $("#advantage"+(i+1)).html("【性格优势】：\n" +
                            "作为个体：严肃的生活哲学。思想深邃，独立思考而不盲目从众。注重承诺，可靠安全。高标准，追求完美。谦和稳健。深思熟虑，三思而后行。坚韧执着。\n" +"<br>"+
                            "沟通特点：享受敏感而有深度的交流。设身处地地体会他人。能记住谈话时共鸣的感情和思想。喜欢小群体交流的思想碰撞。关注谈话的细节。\n" +"<br>"+
                            "作为朋友：默默地为他人付出以表示关切和爱。对友谊忠诚不渝。真诚关怀朋友的境遇，善于体贴他人。能够记得特殊的日子。遭遇难关时，极力给予鼓舞安慰。\n" +"<br>"+
                            "对待工作和事业：强调制度、程序、规范、细节和流程。做事之前首先计划且严格按照计划去执行。喜欢探究及根据事实行事。\n" +"<br>"+
                            "【性格过当】：\n" +
                            "作为个体：高度负面的情绪化。猜忌心重，不信任他人。太在意别人的看法和评价，容易沮丧，悲观消极。陷于低落的情绪无法自拔。情感脆弱抑郁，有自怜倾向。\n" +"<br>"+
                            "沟通特点：不知不觉地说教和上纲上线。原则性强，不易妥协。强烈期待别人具有敏感度和深度能够理解自己。以为别人能够读懂自己的心思。不太主动与人沟通。\n" +"<br>"+
                            "作为朋友：过度敏感，有时很难相处。强烈的不安全感。远离人群。经常怀疑别人的话，不容易相信他人。对待工作和事业对自己和他人常寄予过高而且不切实际的期望。\n");
                    }
                }


            }
        })
        $("#download").click(function () {
            let targetDom = $("#down1");
            // let copyDom = targetDom.clone();
            let copyDom = $("<div/>");
            copyDom.addClass('super');
            copyDom.width(targetDom.width() + "px");
            copyDom.height(targetDom.height() + "px");
            $('body').append(copyDom);
            let cont = document.getElementById('content');
            console.log(targetDom);
            html2canvas(
                //转换id为export_content的div中的所有内容为pdf
                targetDom,
                {
                    dpi: 50,//导出pdf清晰度
                    onrendered: function (canvas) {
                        let contentWidth = canvas.width;
                        let contentHeight = canvas.height;

                        //一页pdf显示html页面生成的canvas高度;
                        let pageHeight = contentWidth / 592.28 * 841.89;
                        //未生成pdf的html页面高度
                        let leftHeight = contentHeight;
                        //pdf页面偏移
                        let position = 0;
                        //html页面生成的canvas在pdf中图片的宽高（a4纸的尺寸[595.28,841.89]）
                        let imgWidth = 595.28;
                        let imgHeight = 592.28 / contentWidth * contentHeight;

                        let pageData = canvas.toDataURL('image/jpeg', 1.0);
                        let pdf = new jsPDF('', 'pt', 'a4');

                        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                        //当内容未超过pdf一页显示的范围，无需分页
                        if (leftHeight < pageHeight) {
                            pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
                        } else {
                            while (leftHeight > 0) {
                                pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
                                leftHeight -= pageHeight;
                                position -= 841.89;
                                //避免添加空白页
                                if (leftHeight > 0) {
                                    pdf.addPage();
                                }
                            }
                        }
                        pdf.save('性格分析.pdf');
                        $('.super').remove();
                    },
                    //背景设为白色（默认为黑色）
                    background: "#fff"
                })
        })
        $("#back").click(function () {
            window.location.href = "/test/toTestLogin";
        })
    })
</script>
</body>
</html>